<template>
  <div class="org-members">
    <div class="flex items-center justify-between mb-3">
      <span class="text-sm text-gray-500">成员总数：{{ pagination.total }}</span>
      <el-button type="primary" :icon="useRenderIcon('ep:plus')" @click="$emit('create')">
        添加成员
      </el-button>
    </div>

    <PureTable
      ref="tableRef"
      v-loading="loading"
      row-key="id"
      :columns="columns"
      :data="tableData"
      :pagination="pagination"
      :adaptive="true"
      :adaptiveConfig="{ offsetBottom: 16 }"
      @page-current-change="$emit('page-change', $event)"
      @page-size-change="$emit('page-size-change', $event)"
    >
      <template #status="{ row }">
        <el-tag :type="row.status === 1 ? 'success' : 'danger'" effect="plain" size="small">
          {{ row.status === 1 ? "启用" : "禁用" }}
        </el-tag>
      </template>
      <template #operation="{ row }">
        <el-button
          link
          type="primary"
          :icon="useRenderIcon('ep:edit')"
          @click="$emit('edit', row)"
        >
          编辑
        </el-button>
        <el-button
          link
          type="danger"
          :icon="useRenderIcon('ep:delete')"
          @click="$emit('remove', row)"
        >
          删除
        </el-button>
      </template>
      <template #empty>
        <el-empty description="暂无成员" />
      </template>
    </PureTable>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { PureTable } from "@pureadmin/table";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import type { TableColumnList, PaginationProps } from "@pureadmin/table";

const props = defineProps<{
  organization: Record<string, any> | null;
  columns: TableColumnList;
  tableData: any[];
  pagination: PaginationProps;
  loading: boolean;
}>();

const tableRef = ref();
defineExpose({ tableRef });
</script>

<style scoped>
.org-members {
  min-height: 200px;
}
</style>
